import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  // 此处用于存储全局共享的状态数据
  state: {
    token: sessionStorage.getItem("token"), // 登录成功后存储token字符串
    loc: "山东省", // 城市名称,初始化赋值为storage中存储的用户信息

    user: sessionStorage.getItem("user")
      ? JSON.parse(sessionStorage.getItem("user"))
      : "", // user用于存储当前登录用户
  },
  // 提供一些方法,方便的获取state中数据的临时计算结果
  // 类似vue中的计算属性 computed
  getters: {},
  // 用于提供一些方法,修改state中的状态数据
  mutations: {
    // 保存token
    saveToken(state, payload) {
      state.token = payload;
      sessionStorage.setItem("token", payload);
    },

    updateUserInfo(state, payload) {
      state.user = payload; // 将用户传过来的登录成功的user对象存入state.user
      // 存入vuex后还不够,还需要存入  sessionStorage
      sessionStorage.setItem("user", JSON.stringify(payload));
    },
  },
  // actions 用于提供一些方法,异步做了一些耗时的任务
  // 修改state中的状态数据
  // 不能直接修改state,而是需要调用mutations中的方法,来修改state
  actions: {
    // 将login方法定义在此处的好处就是,所有组件都可以随时调用
    login(store, payload) {
      // 执行异步任务,发送请求,得到结果
      // store.commit('updateUserInfo',用户对象)
    },
  },
  modules: {},
});
